<!-- 人口数据-选择数据版本 -->
<template>
  <el-dialog v-model="open" title="人口数据" @open="initOpen" @close="close">
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px">
      <el-form-item label="省" prop="dataRangeProvince">
        <el-select v-model="queryParams.dataRangeProvince" @change="chooseProvince" clearable>
          <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="市" prop="dataRangeCity">
        <el-select v-model="queryParams.dataRangeCity" @change="chooseCity" clearable>
          <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区县" prop="dataRangeArea">
        <el-select v-model="queryParams.dataRangeArea" placeholder="区县" clearable>
          <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="版本号" prop="versionCode">
        <el-input v-model="queryParams.versionCode" placeholder="请输入版本号" clearable />
      </el-form-item>
      <el-form-item label="创建人" prop="uploadUsername">
        <el-input v-model="queryParams.uploadUsername" placeholder="请输入创建人" clearable />
      </el-form-item>
      <el-form-item label=" ">
        <el-button type="primary" @click="handleQuery">搜索</el-button>
        <el-button plain @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <el-table v-loading="loading" :data="tableList" stripe @row-click="rowClick">
      <el-table-column label="选择" width="55" align="center">
        <template #default="{ row }">
          <el-radio-group v-model="selectedId">
            <el-radio :label="row.versionCode">{{ '' }}</el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
      <el-table-column label="版本日期" align="center" prop="versionTime" />
      <el-table-column label="版本号" align="center" prop="versionCode" />
      <el-table-column label="数据名称" align="center" prop="dataName" />
      <el-table-column label="数据范围" align="center" prop="dataRange" />
      <el-table-column label="数据类别" align="center" prop="dataType" />
      <el-table-column label="上传人" align="center" prop="uploadUser" />
      <el-table-column label="上传日期" align="center" prop="uploadTime" />
    </el-table>

    <pagination v-show="queryParams.total > 0" :total="queryParams.total" v-model:page="queryParams.page"
      v-model:limit="queryParams.rows" @pagination="getList" />
    <template #footer>
      <el-button type="primary" @click="confirm" auto-insert-space>确定</el-button>
      <el-button plain @click="close" auto-insert-space>取消</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { getProvince, getChildArea } from "@/api/system/division"
import { versionPage } from '@/api/building'
import { listAdministrativeArea } from '@/api/basicDataManage/economics'

const props = defineProps({
  open: Boolean,
  selected: String,
  type: String
})
const emits = defineEmits(['update:open', 'getVersionCode'])
const route = useRoute()

const { proxy } = getCurrentInstance()
const provinceData = ref([])
const cityData = ref([])
const areaData = ref([])
const queryParams = ref({
  page: 1,
  rows: 10,
  total: 0
})
const getProvinceData = () => {
  getProvince().then(response => {
    provinceData.value = response.data
  })
}
const chooseProvince = (value) => {
  queryParams.value.cityId = null
  queryParams.value.countyId = null
  cityData.value = []
  areaData.value = []
  getChildArea(value).then(response => {
    cityData.value = response.data
  })
}
const chooseCity = (value) => {
  queryParams.value.countyId = null
  areaData.value = []
  getChildArea(value).then(response => {
    areaData.value = response.data
  })
}
const tableList = ref([])
const loading = ref(false)
const selectedId = ref('')

const getList = () => {
  loading.value = true
  if(props.type == 'popluationVersion'){
    versionPage(queryParams.value).then(response => {
      tableList.value = response.data.list ? response.data.list : []
      queryParams.value.total = response.data.total
      loading.value = false;
    })
  }
  if(props.type == 'gdpVersion'){
    listAdministrativeArea(queryParams.value).then(response => {
      tableList.value = response.data.list ? response.data.list : []
      queryParams.value.total = response.data.total
      loading.value = false;
    })
  }
}
const rowClick = (row) => {
  selectedId.value = row.versionCode
}
const handleQuery = () => {
  queryParams.value.page = 1;
  getList()
}
const resetQuery = () => {
  proxy.resetForm("queryRef");
  handleQuery()
}
const initOpen = () => {
  getProvinceData()
  getList()
  selectedId.value = props.selected
}
const close = () => {
  emits('update:open', false)
}
const confirm = () => {
  emits('getVersionCode', selectedId.value)
  close()
}
</script>